<template>
  <div class="c">

<ul>
  <li v-for="(item) in list" :key="item.id">
    <span>{{ item.title }}</span>

<span>{{ item.content }}</span>

<van-switch v-model="item.status" />

<button @click="bianji(item)">编辑</button>
<button @click="del(item)">删除</button>
id<span>{{ item.id }}</span>

  </li>
</ul>
    

<div v-show="isshow" class="b">
  文章标题<input type="text" v-model="title1">
<br>
是否公开<input type="checkbox" v-model="status1">
<br>
<br>
文章内容<textarea name="" id="" cols="30" rows="4"  v-model="content1"></textarea>
<br>
<br>
<input type="text" v-model="id1">

<button @click="fabu(id1)">发布</button>
<button @click="quxiao">取消</button>
</div>


  </div>
</template>
<script setup>
import http from '@/router/http';
import { ref } from 'vue';
let list= ref([]);
let isshow= ref(false);
let title1= ref('');
let content1= ref('');
let status1=ref(false)
let id1=ref('')
let obj=ref({})

function loadList(){
  http({
  url: '/posts',
  method: 'get',

}).then((r) => {
  console.log(r.data);
  list.value=r.data;
  
})

}
loadList()

function del(item){

http({
  url: '/posts/'+item.id,
  method: 'delete',

}).then((r) => {
  console.log(r.data);
  loadList()
})

}

function bianji(item){
  isshow.value=true;
  console.log(item.title);
title1.value=item.title
content1.value=item.content
status1.value=item.status
id1.value=item.id

}

function fabu(id1){
  console.log(id1);
  console.log(this.list);
  obj.value={title:title1.value,content:content1.value,status:status1.value}

 
  
 let index= this.list.findIndex((v)=>v.id==id1 )
  console.log(index);
  // this.list[index].title=title1.value
  // this.list[index].content=content1.value
  // this.list[index].status=status1.value

  this.list[index]=obj.value

  isshow.value=false;

}

function quxiao(){
  isshow.value=false;
}



</script>
<style lang="scss" scoped>
li{border: 1px grey solid;height: 50px;}
.c{display: flex;}
.b{border: rgb(203, 215, 26) 2px solid ;height: 50%;}
  
</style>